<template>
  <div class="teacher-verification">
    <h1>{{ $t('message.teacherVerification') }}</h1>
    
    <div class="controls">
      <div class="filter-section">
        <label for="status-filter">{{ $t('message.status') }}:</label>
        <select id="status-filter" v-model="statusFilter" class="filter-select">
          <option value="all">{{ $t('message.all') }}</option>
          <option value="pending">{{ $t('message.pending') }}</option>
          <option value="approved">{{ $t('message.approved') }}</option>
          <option value="rejected">{{ $t('message.rejected') }}</option>
        </select>
      </div>
      
      <div class="search-section">
        <input 
          type="text" 
          v-model="searchQuery" 
          :placeholder="$t('message.searchTeachers')" 
          class="search-input"
        />
      </div>
    </div>
    
    <div class="teachers-grid">
      <div 
        v-for="teacher in filteredTeachers" 
        :key="teacher.userId" 
        class="teacher-card"
      >
        <div class="teacher-header">
          <h3>{{ teacher.username }}</h3>
          <span :class="['status-badge', getStatusClass(teacher.status)]">
            {{ getStatusText(teacher.status) }}
          </span>
        </div>
        
        <div class="teacher-details">
          <p><strong>{{ $t('message.email') }}:</strong> {{ teacher.email }}</p>
          <p v-if="teacher.university"><strong>{{ $t('message.university') }}:</strong> {{ teacher.university }}</p>
          <p v-if="teacher.studentId"><strong>{{ $t('message.studentId') }}:</strong> {{ teacher.studentId }}</p>
          <p v-if="teacher.idCard"><strong>{{ $t('message.idCard') }}:</strong> {{ teacher.idCard }}</p>
          <p v-if="teacher.qualificationCertificate"><strong>{{ $t('message.qualificationCertificate') }}:</strong> 
            <a :href="teacher.qualificationCertificate" target="_blank">{{ $t('message.viewCertificate') }}</a>
          </p>
          <p v-if="teacher.teachingExperience"><strong>{{ $t('message.teachingExperience') }}:</strong> {{ teacher.teachingExperience }}</p>
          <p v-if="teacher.subjects"><strong>{{ $t('message.subjects') }}:</strong> {{ teacher.subjects.join(', ') }}</p>
          <p v-if="teacher.gradeLevels"><strong>{{ $t('message.gradeLevels') }}:</strong> {{ teacher.gradeLevels.join(', ') }}</p>
          <p v-if="teacher.hourlyRate"><strong>{{ $t('message.hourlyRate') }}:</strong> {{ teacher.hourlyRate }}</p>
        </div>
        
        <div class="teacher-actions" v-if="teacher.status === 'pending'">
          <button class="btn btn-success" @click="approveTeacher(teacher)">
            {{ $t('message.approve') }}
          </button>
          <button class="btn btn-warning" @click="rejectTeacher(teacher)">
            {{ $t('message.reject') }}
          </button>
          <button class="btn btn-info" @click="requestChanges(teacher)">
            {{ $t('message.requestChanges') }}
          </button>
        </div>
      </div>
    </div>
    
    <div v-if="filteredTeachers.length === 0" class="no-results">
      {{ $t('message.noTeachersFound') }}
    </div>
  </div>
</template>

<script>
import { ref, onMounted, computed } from 'vue';
import axios from 'axios';

export default {
  name: 'TeacherVerification',
  setup() {
    const teachers = ref([]);
    
    const statusFilter = ref('all');
    const searchQuery = ref('');
    
    // Fetch teachers from backend API
    const loadTeachers = async () => {
      try {
        const response = await axios.get('/api/admin/teachers');
        teachers.value = response.data || [];
      } catch (error) {
        console.error('Error loading teachers:', error);
        // Fallback to mock data if API fails
        teachers.value = [
          {
            userId: '1',
            username: 'teacher1',
            email: 'teacher1@youke.com',
            status: 'pending',
            university: 'Beijing University',
            studentId: '2021001',
            idCard: '123456789012345678',
            qualificationCertificate: '/certs/teacher1.jpg',
            teachingExperience: '3 years teaching mathematics',
            subjects: ['Mathematics', 'Physics'],
            gradeLevels: ['GRADE_7', 'GRADE_8'],
            hourlyRate: 150.00
          },
          {
            userId: '2',
            username: 'teacher2',
            email: 'teacher2@youke.com',
            status: 'approved',
            university: 'Shanghai Jiao Tong University',
            studentId: '2021002',
            idCard: '123456789012345679',
            qualificationCertificate: '/certs/teacher2.jpg',
            teachingExperience: '5 years teaching English',
            subjects: ['English'],
            gradeLevels: ['GRADE_5', 'GRADE_6', 'GRADE_7'],
            hourlyRate: 120.00
          },
          {
            userId: '3',
            username: 'teacher3',
            email: 'teacher3@youke.com',
            status: 'rejected',
            university: 'Tsinghua University',
            studentId: '2021003',
            idCard: '123456789012345680',
            qualificationCertificate: '/certs/teacher3.jpg',
            teachingExperience: '2 years teaching chemistry',
            subjects: ['Chemistry'],
            gradeLevels: ['GRADE_9', 'GRADE_10'],
            hourlyRate: 100.00
          }
        ];
      }
    };
    
    const filteredTeachers = computed(() => {
      return teachers.value.filter(teacher => {
        const matchesStatus = statusFilter.value === 'all' || teacher.status === statusFilter.value;
        const matchesSearch = teacher.username.toLowerCase().includes(searchQuery.value.toLowerCase()) ||
                             teacher.email.toLowerCase().includes(searchQuery.value.toLowerCase());
        return matchesStatus && matchesSearch;
      });
    });
    
    const approveTeacher = async (teacher) => {
      try {
        await axios.post(`/api/admin/teachers/${teacher.userId}/approve`);
        
        // Update UI
        teacher.status = 'approved';
      } catch (error) {
        console.error('Error approving teacher:', error);
        alert('Failed to approve teacher: ' + error.message);
      }
    };
    
    const rejectTeacher = async (teacher) => {
      try {
        await axios.post(`/api/admin/teachers/${teacher.userId}/reject`);
        
        // Update UI
        teacher.status = 'rejected';
      } catch (error) {
        console.error('Error rejecting teacher:', error);
        alert('Failed to reject teacher: ' + error.message);
      }
    };
    
    const requestChanges = async (teacher) => {
      try {
        await axios.post(`/api/admin/teachers/${teacher.userId}/request-changes`);
        
        // For demo purposes, we'll just show an alert
        alert(`Requesting changes for teacher: ${teacher.username}`);
      } catch (error) {
        console.error('Error requesting changes:', error);
        alert('Failed to request changes: ' + error.message);
      }
    };
    
    onMounted(() => {
      loadTeachers();
    });
    
    return {
      teachers,
      statusFilter,
      searchQuery,
      filteredTeachers,
      approveTeacher,
      rejectTeacher,
      requestChanges
    };
  }
};
</script>

<style scoped>
.teacher-verification {
  padding: 2rem;
  max-width: 1200px;
  margin: 0 auto;
}

.teacher-verification h1 {
  color: #2c3e50;
  margin-bottom: 1.5rem;
}

.controls {
  display: flex;
  justify-content: space-between;
  margin-bottom: 2rem;
  flex-wrap: wrap;
  gap: 1rem;
}

.filter-section, .search-section {
  display: flex;
  align-items: center;
  gap: 0.5rem;
}

.filter-select, .search-input {
  padding: 0.5rem;
  border: 1px solid #ddd;
  border-radius: 4px;
}

.search-input {
  min-width: 250px;
}

.teachers-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(400px, 1fr));
  gap: 1.5rem;
}

.teacher-card {
  background: white;
  border-radius: 8px;
  box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
  padding: 1.5rem;
  border: 1px solid #eee;
}

.teacher-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 1rem;
  border-bottom: 1px solid #eee;
  padding-bottom: 0.5rem;
}

.teacher-header h3 {
  margin: 0;
  color: #2c3e50;
}

.status-badge {
  padding: 0.25rem 0.5rem;
  border-radius: 12px;
  font-size: 0.8rem;
  font-weight: bold;
  text-transform: uppercase;
}

.pending {
  background-color: #f39c12;
  color: white;
}

.approved {
  background-color: #2ecc71;
  color: white;
}

.rejected {
  background-color: #e74c3c;
  color: white;
}

.teacher-details {
  margin-bottom: 1.5rem;
}

.teacher-details p {
  margin: 0.5rem 0;
  word-break: break-word;
}

.teacher-details strong {
  color: #34495e;
}

.teacher-actions {
  display: flex;
  gap: 0.5rem;
  justify-content: flex-end;
}

.btn {
  padding: 0.5rem 1rem;
  border: none;
  border-radius: 4px;
  cursor: pointer;
  font-size: 0.9rem;
}

.btn-success {
  background-color: #2ecc71;
  color: white;
}

.btn-success:hover {
  background-color: #27ae60;
}

.btn-warning {
  background-color: #f39c12;
  color: white;
}

.btn-warning:hover {
  background-color: #d35400;
}

.btn-info {
  background-color: #3498db;
  color: white;
}

.btn-info:hover {
  background-color: #2980b9;
}

.btn-danger {
  background-color: #e74c3c;
  color: white;
}

.btn-danger:hover {
  background-color: #c0392b;
}

.no-results {
  text-align: center;
  padding: 2rem;
  color: #7f8c8d;
  font-size: 1.1rem;
}

@media (max-width: 768px) {
  .controls {
    flex-direction: column;
  }
  
  .search-input {
    min-width: auto;
  }
  
  .teachers-grid {
    grid-template-columns: 1fr;
  }
  
  .teacher-card {
    max-width: 100%;
  }
}
</style>